<template>
    <t-menu theme="light" :value="asiderStore.activeIndex" style="margin-right: 50px" :style="{'width':asiderStore.width+'px'}" :collapsed="asiderStore.isCollapse" >
        <span v-for="menu in menus">
            <t-submenu v-if="menu.children && menu.children.length>0" :value="menu.name" :title="$t(menu.title) ">
        <template #icon>
          <t-icon :name="menu.icon" />
        </template>
        <t-menu-item :value="item.name" v-for="item in menu.children"  @click="menuChange(item)">
            <template #icon>
                <t-icon :name="item.icon" />
            </template>
          <span>{{ $t(item.title) }}</span>
        </t-menu-item>
      </t-submenu>
      <t-menu-item :value="menu.name" v-else @click="menuChange(menu)">
            <template #icon>
                <t-icon :name="menu.icon" />
            </template>
            {{ $t(menu.title) }}
        </t-menu-item>
        </span>

    </t-menu>
</template>


<script setup>
import {ref} from 'vue'
import menuApi from '@/api/menu'
import { useRouter } from 'vue-router';
import { useAsiderStore } from '@/stores/asider'
import { useHeaderStore } from '@/stores/header';
const asiderStore = useAsiderStore()
const headerStore = useHeaderStore()
const router = useRouter()
const menus = ref(menuApi.getMenus())
const menuChange = (t)=>{
    asiderStore.activeIndex = t.name
    asiderStore.addTableTab({title:t.title,name:t.name})
    router.push(t.name)
    headerStore.setBreadcrumbs(t.id)
}

</script>